<template>
  <div class="tag-wrap">
    <i class="iconfont icon-add"></i>
    <div v-for="(tag,index) in tagClass" :class="tag.name" :key="index" @click="mapFunction(index)"><i :class="tag.icon"></i></div>
  </div>
</template>

<script>
import mapU from "@/utils/mapUtils";
import curMap from "@/components/Map/MapBox.vue";

export default {
  name: 'tag-wrap',
  data(){
    return {
      // tagClass :['layer','map','earth','add','value','sub']
      tagClass :[
        {name:'add',icon:'iconfont icon-jia'},
        {name:'sub',icon:'iconfont icon-jianshao'}
      ]
    }
  },
  methods:{
    mapFunction(index){
      switch(index){
        case 0:
          mapU.zoomIn(curMap.data.map)
          break;
        case 1:
          mapU.zoomOut(curMap.data.map)
          break;
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import url('//at.alicdn.com/t/font_1151041_swd3ln69mpe.css') 
.tag-wrap
  position absolute
  z-index 20
  left 20px
  bottom 140px

.tag-wrap > div
  margin-bottom 15px
  width 30px
  height 30px
  cursor pointer
  color #fff
  background #555
  border-radius 2px
  box-shadow 8px 8px 8px rgba(0, 0, 0, 0.5)

.mt
  margin-top 30px

i 
  display block
  color #C0C4CC
  margin-left 6px
  padding-top 6px

.tag-wrap > div:hover i
  color #13ffd7   

</style>
